Tampilkan postingan dengan label Panduan Membuat Blog. Tampilkan semua postingan

Parse Kode Iklan agar Iklan Bisa Diletakkan dalam Postingan

Mem-Parse\mem-parsing HTML adalah salah satu cara yang digunakan para blogger untuk memposting artikel yang berkaitan dengan code HTML/javascript. Kegunaannya agar kode yang kita posting di dalam artikel akan tampil menjadi sebuah karakter/tulisan. Karena jika kita memposting kode script ke dalam artikel, maka tulisan tidak akan muncul atau malah muncul sebagai widget.

Dengan mem-parse, script iklan juga bisa diletakkan dalam setiap postingan kita, bukan hanya cuma meletakkan iklan di side bar atau top bar dengan memasukkan kode tersebut di gadget atau widget blog kita.

Dengan kata lain, Code converter dipergunakan untuk mem-parse atau mengubah kode html agar bisa ditampilkan dalam bentuk postingan. Tujuannya agar kode tersebut tidak dianggap perintah oleh system. Code converter ini sangat berguna bagi sahabat blogger yang sering berurusan dengan kode-kode yang harus di posting pada blog.

Silahkan buka http://www.blogcrowds.com/resources/parse_html.php

Silahkan masukkan kode script iklan atau kode script apapun yang ingin di parse, kemudian convert dan masukkan kode tersebut dalam postingan artikel ataupun juga bisa ditaruh di dalam templete blog anda..

Semoga bermanfaat.

Cara Memasang Iklan Di Tengah Postingan

Cara Memasang Iklan Di Tengah Postingan - Bagaimana cara meletakkan kode iklan di tengah postingan blog? Iklan yang letaknya di tengah postingan atau diantara postingan blog ini sebenarnya sudah banyak yang pada tahu bagaimana cara menempatkannya, tapi tidak ada salahnya saya share lagi mungkin masih ada yang belum tahu cara memasangnya.

Dengan meletakan iklan di tengah postingan tentunya menjadi tempat yang sering kali dilihat oleh pengunjung, karena setiap pengunjung membuka postingan yang satu dan membuka postingan yang lainnya, maka kode iklan tersebut akan selalu terbuka dan terbaca sehingga kemungkinan besar pengunjung akan mengklik iklan tersebut. Baca juga postingan tentang cara memasang kode iklan di bawah dan di atas postingan.

Untuk memasang kode iklan di tengah postingan, kode iklan tersebut harus di parse html terlebih dahulu, supaya dapat diterapkan pada blog, lihat bagaimana cara parse html untuk kode iklan yang akan ditempatkan di tengah postingan blog.

Berikut cara pasang iklan di tengah-tengah postingan blog

1. Login ke Blogger
2. Pilih Template
3. Pilih Edit html
4. Centang Expand Template Widget
5. Cari kode di bawah ini <data:post.body/>
6. Kalau sudah dapat, ganti kode tersebut dengan kode di bawah ini :

<div expr:id='"iklan1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
<b:if cond='data:blog.pageType == "item"'>

Letakan kode iklan di sini

</b:if>
</div>
<div expr:id='"iklan2" + data:post.id'>

<data:post.body/>

</div>
<script type="text/javascript">
var obj0=document.getElementById("iklan1<data:post.id/>");
var obj1=document.getElementById("iklan2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>

Keterangan :
Silahkan ganti tulisan yang warna merah dengan kode iklan yang sudah di parse

7. Selesai, save template anda

Untuk parse kode silahkan lihat disini

Nah sekian dulu postingan tentang cara memasang kode iklan berada di tengah postingan, semoga bermanfaat dan selamat menerapkan.

Mengubah Font / Jenis Huruf Pada Postingan Blog

Tutorial blog kali ini akan memberikan sedikit variasi tentang tulisan atau jenis huruf pada artikel blog, dimana nantinya juga dapat merubah besar dan kecilnya huruf tapi bukan permanen. Anda hanya memilih type huruf / font dan juga ukuran huruf pada widget yang akan dipasang. Mungkin saja para pengunjung tidak suka dengan jenis huruf pada postingan blog anda, jadi mereka dapat memilihnya pada widget huruf.

Anda tinggal memasang widget huruf pada blog anda, bisa anda letakkan pada sidebar atau didalam postingan blog anda. Widget pengganti font / huruf ini hanya dapat berfungsi pada isi artikel anda, jadi font yang ada pada menu navigasi atau yang lainnya tidak akan berubah. Bagaimana, apakah anda ingin memasang widget pengganti huruf di blog anda? Berikut kode yang harus anda pasang di blog anda.

<script>
function go1(){ if (document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value != "none") { document.getElementById('main').style.fontSize =document.selecter2.select2.options [document.selecter2.select2.selectedIndex].value } } function go2(){ if (document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value != "none") { document.getElementById('main').style.fontFamily =document.selecter2.select3.options [document.selecter2.select3.selectedIndex].value } }
</script> <form id="forma" method="POST" name="selecter2">
<select name="select3" onchange="go2()" size="1" style="font-family: verdana; font-size: 8pt;"> <option value="Times New Roman">Times New Roman </option><option value="Arial">Arial </option><option selected="selected" value="Book Antiqua">Book Antiqua </option><option value="Bookman Old Style">Bookman Old Style </option><option value="Century Gothic">Century Gothic </option><option value="Comic Sans Ms">Comic Sans Ms </option><option value="Tahoma">Tahoma </option><option selected="selected" value="Trebuchet Ms">Trebuchet Ms </option><option value="Verdana">Verdana </option></select> <select name="select2" onchange="go1()" size="1" style="font-family: verdana; font-size: 8pt;"> <option value="8px">8 </option><option value="9px">9 </option><option value="10px">10 </option><option value="11px">11 </option><option selected="selected" value="12px">12 </option><option value="14px">14 </option><option value="16px">16 </option><option value="18px">18 </option></select></form>

Nah sekian dahulu postingan yang singkat, semoga bermanfaat dan selamat mencoba tutorial blog mengenai cara merubah font atau huruf pada postingan blog, happy blogging.

Trik Membuat Url Direct link Blogger

Cara Membuat URL Link Redirect pada Blog Blogspot - Agar Blog Mengalihkan ke URL lain. Trik yang satu ini sangat berguna bagi sobat Blogger yang ingin mengalihkan para pengunjung di blog lama ke blog baru. Hal ini mungkin dikarenakan sobat telah membuat blog baru dengan alamat baru atau lebih bagus daripada alamat/URL blog yang sebelumnya.

Seperti biasa, jika kita membuat blog baru dengan URL baru, tentu trafiknya pun harus mulai dari nol, maka dari itu trik ini berguna bagi kita yang ingin memanfaatkan trafik blog lama kita dengan cara menerapkan trik redirect yang mengarahkan blog lama ke blog baru kita, sehingga kita tak perlu memulai trafik kita dari nol... menyenangkan bukan? :D

Bagi sobat Blogger yang ingin menerapkan trik redirect di blognya, silahkan untuk menyimak langkah-langkah berikut:

1. Login ke blogger seperti biasa
2. Pergilah ke tab "pengaturan" blog lama anda (yang sudah memiliki trafik yang lumayan banyak)
3. Selanjutnya kliklah "Edit HTML"
4. Carilah kode tag <head> dan letakkan kode berikut di bawahnya

Angka 3 bermaksud untuk meredirect/mengalihkan ke blog baru anda maka butuh 3 detik (semakin kecil semakin cepat, contoh:1 maka berarti 1 detik). Lalu link http://caramembuatblog-giant.blogspot.com/ bisa sobat ganti dengan alamat blog baru sobat (URL blog yang dijadikan sebagai sasaran pengalihan).

5. Klik simpan template. Ding dong...silahkan lihat hasilnya di blog sobat...

Bagaimana? Blog lama sobat akan di-redirect ke blog baru bukan? Semoga bermanfaat hahai...

Cara Memasang Meta Tag,Keyword dan Deskripsi di Template blogspot

Selain mengubah tag heading di blogspot menjadi seo friendly, Meta tag keyword dan deskripsi ini salah satu teknik seo yang wajib, kenapa wajib ? Menurut pakar seo dalam meningkatkan blog menjadi no 1 di serp adalah keyword. Berikut langsung saja cara memasang meta tag keyword dan deskripsi di blogspot :

Masuk blogger > rancangan > edit html > centang expand template widget, cari kode di bawah ini:

<title><data:blog.pageTitle/></title>

Letakan kode berikut ini di bawah kode tadi:

<meta content=' Tulis deskirpsi kamu disini' name='description'/> <meta content='tulis keyword1 keyword2 keyword3 kamu disini' name='keywords'/> <meta content='INDEX, FOLLOW' name='ROBOTS'/>

Penjelasan :

<meta content=' Tulis deskirpsi kamu disini' name='description'/> Kode di atas disebut dengan meta tag deskripsi yang berisikan tentang deskripsi atau gambaran umum tentang blog kita. Contoh nya <meta content=' aplikasi handphone,jasa iklan' name='description'/> <meta content='tulis keyword1 keyword2 keyword3 kamu disini' name='keywords'/> kode di atas disebut meta tag keyword kode ini lah yang menentukan keyword sebagai senjata utma dalam seo.

Dalam menuliskan keyword harus di tandai dengan tanda pemisah ( , ) atau ( | ) tidak boleh di ulang- ulang misalkan begini : tutorial linux ubuntu | aplikasi linux ubuntu. Terlihat jelas bahwa dalam penulisan tersebut terdapat kata yang berulang-ulang yaitu linux ubuntu. Hal ini akan di anggap sebagai spam oleh google. Berikut contoh penulisan keyword yang benar <meta content='Tutorial, cara, instal, how to, aplikasi,applications, Driver, Linux, Ubuntu' name='keywords'/> <meta content='INDEX, FOLLOW' name='ROBOTS'/> kode di atas adalah meta tag robots, tujuan nya adalah mengizinkan robot search engine atau spider untuk mengindex blog kita. Ini sangat berguna supaya halaman-halaman kita terbaca oleh search engine.

Cara Membuat Menu Dtree Pada Blog

Ada yang menanyakan tentang menu Dtree, saya akan bahas sekalian bisa agan praktekan

Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?

Beginilah cara membuatnya :

1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>

3. Trus Klik Tombol "Save

4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.

berikut ini keteranganya:

Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:

d.add(10,0,’Profile’,’link.html’,’’,’’,’http://1.bp.blogspot.com/_cwjk6FH_7pw/Sb4bSFYb_GI/AAAAAAAAD1g/Mp-0M0Xxz8s/s72-c/siu%20mau%20%28397%29.jpg’);

Ganti text "Tulisan Merah" dengan alamat gambar kamu

Mudah Khan...
Selamat Mencoba....

Cara Membuat Widget Change Font This Blog

Widget Change Font This Blog - adalah widget yang memungkinkan pengunjung untuk mengganti jenis font pada blog tersebut. Jadi hanya butuh beberapa detik saja, font ,atau jenis huruf blog tersebut dengan sekejap berubah. Selain itu, dengan Widget Change Font This Blog, pengunjung selain bisa mengubah jenis font juga bisa mengubah ukuran font atau huruf sesuka hati.

Dengan demikian penggunjung akan lebih senang, karena bisa mengganti jenis font sesuak hati. Jenif font memang sangat memengaruhi tulisan, pengunjung yang satu dengan pengunjung yang lain tentunya berbeda selera. Nah, pada postingan kali ini, kita akan belajar membuat, memasang Widget Change Font This Blog, atau Widget untuk mengubah Jenis Font Otomatis pada Blog. Bagaimana caranya ? TKP Gan . . . . .

Cara membuat dan memasang widget Change Font This Blog

Masuk ke blogger
Buka design / rancangan
Pilih Page Elemen /Elemen Laman
Add a Gadget / Tambahkan Gadget
Pilih HTML / Javascript ,dan masukkan kode berikut

<script>
   function go1(){
   if (document.selecter2.select2.options
   [document.selecter2.select2.selectedIndex].value != "none") {
   document.getElementById('main').style.fontSize
   =document.selecter2.select2.options
   [document.selecter2.select2.selectedIndex].value
   }
   }
   function go2(){
   if (document.selecter2.select3.options
   [document.selecter2.select3.selectedIndex].value != "none") {
   document.getElementById('main').style.fontFamily
   =document.selecter2.select3.options
   [document.selecter2.select3.selectedIndex].value
   }
   }
   </script>
   <form id="forma" name="selecter2" method="POST">
   <select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
   <option value="Times New Roman" />Times New Roman
   <option value="Arial" />Arial
   <option selected value="Book Antiqua" />Book Antiqua
   <option value="Bookman Old Style" />Bookman Old Style
   <option value="Century Gothic" />Century Gothic
   <option value="Comic Sans Ms" />Comic Sans Ms
   <option value="Tahoma" />Tahoma
   <option selected value="Trebuchet Ms"//>Trebuchet Ms
   <option value="Verdana" />Verdana
   </select>
   <select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
   <option value="8px" />8
   <option value="9px" />9
   <option value="10px" />10
   <option value="11px" />11
   <option selected value="12px" />12
   <option value="14px" />14
   <option value="16px" />16
   <option value="18px" />18
   </select></form>
   </div>

Simpan
Hasilnya seperti ini

Oke sampai di sini, semoga bermanfaat.

Artikel sebelumnya Cara Memasang Tombol Share di Posting Blog

Snippet Google+ Tidak Plus Dengan Meta Description Tags?

Beberapa sobat mungkin sudah pernah menambahkan Meta Tags pada template blognya, baik itu tags description, keyword, author, robots, dan lain-lain.

Nah, bagi mereka yang sudah menambahkan tags description pada template blognya, maka snippet yang muncul pada post Google+ adalah deskripsi yang terdapat pada tags tersebut, bukan snippet dari artikel yang kita tulis. Tentu saja hal ini kurang mengenakan karena setiap kali kita mempublish sebuah artikel maka yang muncul terus-terusan berupa tags description, sekalipun judul artikelnya berbeda-beda.

Untuk menghilangkannya, hapus saja tags description yang terdapat pada template blog sehingga apabila ada sobat lain yang menshare melalui Google+ button, atau ketika mempublish sebuah artikel (bagi mereka yang sudah menghubungkan blogger profile-nya dengan Google+) maka yang muncul nanti adalah snippet dari artikel yang kita tulis. Gampang kan?

Lalu bagaimana dengan tags description-nya, padahal sangat penting buat penelusuran si mbah? Ya... tunggu saja artikel berikutnya, hehehe...

Ok, segitu aja sob informasinya. Semoga bermanfaat ..

Mengalihkan URL Tips Untuk Posting Yang Terhapus Dengan Pengalihan Khusus

Mungkin di antara sobat, secara sengaja ataupun tidak, pernah menghapus sebuah artikel yang sudah terpublikasi, atau mungkin juga ada sebuah artikel yang "sudah kadaluarsa" sehingga tidak ingin dibaca lagi oleh orang lain.

Untuk hal semacam itu sebaiknya dilakukan pengalihan ke URL (Uniform Resource Locator) lain sehingga pembaca masih bisa menikmati bacaan (artikel) lain yang mungkin masih erat hubungannya dengan artikel yang sudah dihapus atau kadaluarsa tersebut, sehingga tidak merasa sia-sia ketika membuka URL artikel yang sudah terhapus atau kadaluarsa tersebut.

Untuk mengalihkan URL ini, lakukan hal berikut:

Dari halaman Dasbor, pilih Setelan - Preferensi penelusuran.
Pada bagian Pengalihan Khusus pilih Edit.
Setelah itu, pada kota isian, masukkan URL yang diinginkan, seperti nampak pada gambar berikut:

Catatan:
URL tidak ditulis lengkap dengan http://namablog.blogspot.com, tapi cukup memasukkan ujungnya saja, seperti contoh berikut:
Dari : /2010/02/awas-css-cascading-style-sheets-blog.html

Kepada : /2012/09/membuat-css-sprite-untuk-mempercepat.html

Setelah itu simpan dan ucapkan Alhamdulillah....

Pengalihan khusus ini bisa lebih dari satu. Kamu bisa menambahkan URL-URL lain sesuai kebutuhan.

Ok, segitu aja sob. Semoga bermanfaat .

Cara Memasang Tombol Share di Posting Blog

Artikel sebelumnya saya sudah membahas tentang Cara Menambahkan 2 Kolom Elemen Halaman Di Bawah Header, kali ini saya akan memberikan posting tentang Cara memasang tombol share di posting blog.

Sebagai blogger sangat dianjurkan bahkan di wajibkan memasang tombol share pada setiap posting. Manfaat yang diperoleh dari pemasangan tombol share di setiap posting, terutama trafficnya akan terus meningkat.

Sebagai bayangan ilustrasi jika visitor yang membaca posting anda memiliki akun facebook yang beranggotakan 400 teman, di saat visitor tersebut melakukan klik tombol like maka otomatis postingan anda akan terkirim di dindingnya. Saat itulah teman-teman dari visitor tersebut juga akan ikut membaca artikel anda.

Berikut ini ada 3 pilihan tombol share yang bisa anda gunakan sesuai kebutuhan.

1. Kode script button share style-1:

<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71feed783c3890"></script>

2. Kode script button share style-2:

<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71ff8750bee738"></script>

3. Kode script button share style-3:

<b:if cond='data:blog.pageType == "item"'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script>

Setelah anda menentukan salah satu preview yang cocok, langkah selanjutnya memasang di template. Berikut cara pemasangannya.

Login ke dashboard blogger anda.
Pilih Rancangan > Edit HTML, centang Expand widget template.
Cari kode <data:post.body/> atau kode <div class='post-header-line-1'/> pada template anda ( salah satunya saja ! ) dan letakkan script button sharenya diatas kode tadi.
Save template dan lihat hasilnya.

Lihat hasilnya. Semoga bermanfaat.

Cara membuat Artikel Terkait Dengan Gambar/Thumbails

Pada artikel sebelumnya saya sudah membahas cara membuat tab view widget, sekarang akan saya jelaskan cara membuat artikel terkait dengan gambar/thumbails yang berada di bawah postingan.

Baiklah tanpa panjang lebar langsung saja kita mulai tutorial ini.
1. Masuk ke akun blogger sobat
2. Klik design kemudian edit HTML
3. Centang kotak kecil di kanan atas Expand Widget Templates
4. Untuk menghindari kesalahan sebaiknya download full template dulu
5. Setelah itu letakkan kode berikut di atas </head>

<b:if cond='data:blog.pageType == "item"'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, “Times New Roman”, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://belajarblogging.googlecode.com/files/releatedimage.js' type='text/javascript'/>

</b:if>

Kalau sudah, cari kode berikut

<div class='post-footer-line post-footer-line-1'>

Dan letakkan kode di bawah ini di BAWAH kode di atas

<b:if cond='data:blog.pageType == "item"'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://bloggerbiasa.blogspot.com/2011/01/cara-membuat-artikel-terkait-dengan.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl="<data:post.url/>";

var maxresults=5;

var relatedpoststitle="Artikel Terkait";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

Simpan template dan lihat hasilnya.
Selamat mencoba.

Cara Membuat TAB VIEW WIDGET

Jika anda ingin meminimalis tampilan blog Tab View Widget bisa menjadi solusinya. Selain tidak memakan ruang di blog juga akan mempercantik tampilan dan terlihat lebih komunikatif.

Langkah Pertama

Login ke akun Blogger kamu.
Dari halaman dashboard, pilih Edit HTML.
Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 90px; /* ukuran lebar menu */
text-align: center;
height: 24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #CCC; /* warna border menu */
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background-color: #A4A4A4; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /* warna background menu aktif */
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* background kotak utama */
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar hurup kotak utama */
}

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.

Langkah Kedua

Setelah itu letakkan kode berikut di bawah kode ]]></b:skin> tersebut

Simpanlah hasil editing tersebut.

Langkah Ketiga

Pilih tab Elemen Halaman ( Page Element ).
Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
Copykan script berikut dan letakkan pada kotak Content yang tersedia:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
</div>
<div style="width: 99%; height: 200px;" class="Pages">


<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>



<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
Isi Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>



<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>


</div></div></form>

<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://ranjanginformasi.blogspot.com/" target="_blank" title="Tabview Widget">Ranjang Informasi</a></div>

Pada tulisan yang tercetak tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain ( lebih dari 3 ) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

Selesai.. Simpan template dan lihat hasilnya.
Selamat mencoba, jika ada pertanyaan silahkan tulis di ruang komentar.

Cara Menambahkan 2 Kolom Elemen Halaman Di Bawah Header

Kali ini kita bahas desain template, fokusnya pada elemen. Saya akan berikan cara termudah menambah 2 kolom elemen halaman di bawah header.

Hal penting yang harus anda lakukan Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap. Silahkan save dulu template anda, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

Ok, kita lanjutkan, caranya sangat mudah, ikuti langkah-langkah berikut ini :

Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!

Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):

Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode <div id='main-wrapper'>

Lalu klik Simpan Template....
Selesai.....

Cara Membuat widgets daftar isi otomatis versi 3

Sebuah blog yang bagus harusnya memiliki daftar isi untuk mempermudah pembaca mencari artikel yang ingin di baca. Selain itu daftar isi dapat mempercantik tampilan blog.

Tahap Pembuatan

1. Login di akun blog
2. Klik Dasboard
3. Klik Page Element

4. Klik Add Gadget

5. Klik plus button (+) for HTML/JavaScript. (img)

6. Copy and paste kode dibawah ini

<div style="overflow:auto;
padding-left:5px;
border:1px solid white;
width:95%;
height:400px;
background:transparent url(#) no-repeat ;">
<script language="javascript">
numposts=9999;
home_page="BLOK KAMU.blogspot.com";
explanpost="new";
</script>
<ul><script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/sitemap-np.js"></script></ul>
</div>

Keterangan :
Kode Warna merah :
width:95%, lebar widgets diatur secara otomatis menyesuaikan lebar kolom, ganti 100px bila ingin diatur secara manual, angka 100 menunjukan lebar widgets ( ganti sesuai kebutuhan )
height:400px, tinggi widgets angka 400 menunjukan tinggi widgets ( ganti sesuai kebutuhan )
Kode Warna orange :
kode transparent menunjukan warna netral ( menggunakan warna dasar blog ) ganti dengan kode warna sesuai kebutuhan, Url(#) kode # berarti tidak menggunakan background image, bila ingin menggunakan image ganti dengan alamat URL image yang akan dipasang
Kode warna kuning :
Alamat blog kamu
Kode warna biru :
untuk menampilkan kode bagi posting yang baru ( terbaru ), ganti sesuai selera, "baru","terbaru", dll.

Simpan template dan lihat hasilnya.

Cara Menghapus Label Pada Blog Baru

kali ini artikel sederhana tentang cara menghapus label pada blog. Pada tampilan blogger terbaru memang sedikit berbeda dengan tampilan blogger yang lama. Salah satu perbedaan yang biasa terlihat adalah tidak adanya menu REMOVE LABEL jika kita ingin menghapus label. Maka sebagai jalan alternatif untuk menghapus label, kita cukup mengganti label lama (yang ingin dihapus) ke label yang baru. Untuk lebih jelasnya saya gambarkan contoh kasusnya.

Contohnya saya mempunyai blog dengan tema artikel / bacaan, label untuk blognya sebagai berikut :
- Artikel Tokoh (sebanyak 10 posting / artikel)
- Artikel Berita (sebanyak 10 posting / artikel)
- Info Komputer (sebanyak 5 posting / artikel)
- Info Internet (sebanyak 5 posting / artikel)

Kemudian saya ingin menghapus label Artikel Tokoh dan ingin menggantinya dengan label baru yang bernama Tokoh Dunia, seperti pada gambar dibawah :

Berikut langkah langkahnya.

Menghapus label blog - Langkah pertama :
       Login ke Blogger kemudian ke DASBOR menu.

Menghapus label blog - Langkah kedua :
       Pilih menu POS, kemudian cari postingan / artikel mana yang ingin di hapus labelnya. Kemudian klik EDIT ( terletak di bawah daftar judul posting).

Menghapus label blog - Langkah ketiga :
       Setelah di klik, akan muncul seperti gambar diatas. Kemudian klik LABEL pada menu di sebelah kanan, otomatis akan memunculkan label posting sebelumnya. Hapus tulisan label tersebut dan ketikkan label baru yang ingin di buat. (Seperti contoh kasus di atas).

Menghapus label blog - Langkah ke empat :
       Jika sudah klik SELESAI pada label, selanjutnya klik PERBARUI untuk mengakhiri. Ulangi semua cara diatas untuk semua posting dengan label yang sama. Jika semua posting sudah dipindahkan ke label yang baru, maka label yang lama akan otomatis TERHAPUS sendiri, karena kosong (tidak ada posting di dalam label).

Semoga bermanfaat.

Trik Membuat Url Direct link Blogger

Cara Membuat URL Link Redirect pada Blog Blogspot - Agar Blog Mengalihkan ke URL lain. Trik yang satu ini sangat berguna bagi sobat Blogger yang ingin mengalihkan para pengunjung di blog lama ke blog baru. Hal ini mungkin dikarenakan sobat telah membuat blog baru dengan alamat baru atau lebih bagus daripada alamat/URL blog yang sebelumnya.

Seperti biasa, jika kita membuat blog baru dengan URL baru, tentu trafiknya pun harus mulai dari nol, maka dari itu trik ini berguna bagi kita yang ingin memanfaatkan trafik blog lama kita dengan cara menerapkan trik redirect yang mengarahkan blog lama ke blog baru kita, sehingga kita tak perlu memulai trafik kita dari nol... menyenangkan bukan? :D

Bagi sobat Blogger yang ingin menerapkan trik redirect di blognya, silahkan untuk menyimak langkah-langkah berikut:

Login ke blogger seperti biasa
Pergilah ke tab "pengaturan" blog lama anda (yang sudah memiliki trafik yang lumayan banyak)
Selanjutnya kliklah "Edit HTML"
Carilah kode tag <head> dan letakkan kode berikut di bawahnya

Meningkatkan Pagerank Melalui Web Direktori Gratis

Sudah menjadi harga mati untuk meningkatkan pagerank. Salah satu cara untuk meningkatkan pagerank adalah dengan melakukan pertukaran link. Selain bertukar link dengan sesama blogger, maka kita juga dapat mendaftakan blog kita di web direktori. Blog anda akan mendapatkan backlink dari web direktori, selanjutnya web direktori akan mendapat backlink dari blog kita. jadi terjadi pertukaran link. Backlink ini sangat bermanfaat dalam menunjang optimasi seo blog .

Umumnya saat mendaftar di web direktori , maka anda terlebih dahulu kopi script link web direktori ke dalam blog anda. Selanjutnya saat mengisi form pendaftaran maka diminta url reciprocal link, anda cukup isi dengan halaman tempat membuat link dari blog anda ke web direktori.

Beberapa keuntungan mendaftar blog ke web direktori Indonesia;

Pengunjungnya kebanyakan dari indonesia, jadi web direktori bisa jadi tempat promosi blog anda, untuk mendapatkan trafik
Proses approve lebih cepat terkadang hanya dalam hitungan hari hingga 2 minggu, jika di web direktori luarnegeri sekitar 2 minggu hingga 6 bulan proses approve.
Dll..

Buat teman-teman yang berniat mendaftar blog di web direktori indonesia (gratis), bisa gunakan link di bawah ini:

Direktori Website Indonesia

http://add.web.id/
http://www.alamatweb.com/
http://www.dir.web.id/
http://www.salvida.com/
http://www.incari.com/direktori/
http://www.indotop10.com/
http://www.webdirektoriindonesia.com/
http://www.indonesiacentral.info/
http://directory.indonesia-portal.co.uk/
http://www.indoprolink.com/
http://www.indotoplist.com/direktori/
http://www.indourl.com/
http://www.indovalue.com/
http://www.indozone.biz/
http://www.jalijali.com/
http://www.ji-indonesia.com/
http://www.katadunia.com/
http://www.okebiz.com/mod.php?mod=katalog
http://www.rank.web.id/
http://www.situs-indonesia.com/
http://www.situs.web.id/
http://www.startindonesia.com

Masih banyak lagi web direktori yang bisa anda gunakan selain di atas.

Cara Membuat Kotak Like Facebook Melayang Dengan Tombol Close

Kali ini saya akan membahas Cara Membuat Kotak Like Facebook Melayang Dengan Tombol Close, dengan bantuan jQuery akan memberi efek slide. Berawal dari permintaan teman bagaimana cara membuat kotak melayang yang ada di Blazer Blog yang bertulisan Please Follow Us, mungkin bagi para pengunjung setia Blazer Blog, saya akan beritahu bagaimana cara membuatnya.

1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Cari kode </head> > letakan kode di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

3. Simpan dan kembali ke menu awal Rancangan > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<script src='http://latesthack.googlecode.com/svn/trunk/html/latesthack.js'></script>
<div id="latesthackpopupslider" style="position:absolute;
width:300px;
height:300px;
background:#ffffff;
top:50px;
border:5px solid #ccc;
z-index:999;
display:none;
padding:10px;
left:-300px;"><a href="#" id="latesthackclose" style="color:#ddd!important;" onclick="return false;"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg55UaJcyb9UWfOUZpbPT4EKLCI4zAaKjoNaQTTQRXQF1hP1-l3AeeCodWE32zRzO3IMJfTLnqGeWvse89E-8vPWz72Ts1qhnPkrQeg0UTjtJ_QU8AMkjWF7FUfPpzHg-gKKw6n7qyCsAk/s1600/CROSSBYLATESTHACK.png" align="right" /><span style=color:#333;font-weight:bold;font-size:13px;">Follow kami di Facebook dengan menekan tombol like yang ada di bawah ini</span> </a>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBLAZERBLOG&width=300&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</div>

Ganti kode yang berwarna merah dengan username facebook anda (contoh : facebook.com/BLAZERBLOG)
Dan ganti kode yang berwarna biru dengan kata-kata lainnya.
Sebenarnya saya agak bedakan dengan punya saya, jika anda bisa utak atik, pasti bisa.

Cara Membuat widget google translate untuk blogger

Kali ini saya akan membahas Cara Membuat widget google translate untuk blogger.

1. Silahkan login ke blogger
2. Klik Tata Letak
3. Klik tab Elemen Halaman
4. Klik Tambah Gadget

5. Klik tanda plus (+) untuk HTML/Javascript

6. Copy paste kode berikut :

Keterangan :

kode warna merah : alamat URL image bendera sebagai icon ( bisa diganti dengan image yang lain sesuai kebutuhan )
kode warna biru : tinggi dan lebar image icon bendera ( ubah sesuai kebutuhan )
posisi widget ini akan menyesuaikan lebar kolom yang ada sehingga bisa menjadi 1 / 2 /3 baris

Selamat mencoba
semoga bermanfaat..!
Terima kasih..!

Cara Mengedit Template Blog Secara Online Bagian 3

Kita jumpa lagi untuk membahas cara Mengedit Template Blog Secara Online bagian 3. Jika anda membaca sampai sini, saya berharap postingan ini berguna untuk anda... (jangan lupa komentarnya == Ngareeep == senyum).

Bagi yang belum membaca artikel bagian pertama silahkan baca dulu.
Cara Mengedit Template Blog Secara Online Bagian 1
Cara Mengedit Template Blog Secara Online Bagian 2

Pada tutorial kali ini kita akan membahas bagaimana cara menyimpan kode CSS hasil editan kita supaya bisa dilanjutkan di lain waktu.

Langsung saja kalau begitu. Berikut ini langkah-langkahnya :

Langkah 1
Setelah selesai mengedit template, klik tombol Save

lalu simpan dengan nama yang sudah ada (File ini akan tersimpan dengan nama Embedded Styles.css). Setelah Anda menyimpan file CSS tersebut, mengedit template secara offline bisa Anda lanjutkan di lain waktu.

Langkah 2

Untuk melanjutkan edit template, buka Firefox lalu klik File > Open > lalu cari HomePage blog Sobat yang telah di Simpan pada tutorial bagian 2.

Langkah 3
Buka editor kode CSS. Pilih tab Embedded Styles lalu klik tombol Open

. Cari file “Embedded Styles.css” yang telah di simpan pada langkah 1. Setelah itu Anda bisa melanjutkan edit template sesuai keinginan Anda...

Selesai....
Semoga Bermanfaat...

Langganan: Postingan (RSS)

Tutorial Cara Mudah Design Blog

Parse Kode Iklan agar Iklan Bisa Diletakkan dalam Postingan

Cara Memasang Iklan Di Tengah Postingan

Mengubah Font / Jenis Huruf Pada Postingan Blog

Trik Membuat Url Direct link Blogger

Cara Memasang Meta Tag,Keyword dan Deskripsi di Template blogspot

Cara Membuat Menu Dtree Pada Blog

Cara Membuat Widget Change Font This Blog

Snippet Google+ Tidak Plus Dengan Meta Description Tags?

Mengalihkan URL Tips Untuk Posting Yang Terhapus Dengan Pengalihan Khusus

Cara Memasang Tombol Share di Posting Blog

Cara membuat Artikel Terkait Dengan Gambar/Thumbails

Cara Membuat TAB VIEW WIDGET

Cara Menambahkan 2 Kolom Elemen Halaman Di Bawah Header

Cara Membuat widgets daftar isi otomatis versi 3

Cara Menghapus Label Pada Blog Baru

Trik Membuat Url Direct link Blogger

Meningkatkan Pagerank Melalui Web Direktori Gratis

Cara Membuat Kotak Like Facebook Melayang Dengan Tombol Close

Cara Membuat widget google translate untuk blogger

Cara Mengedit Template Blog Secara Online Bagian 3

Translation Tools

Popular Post

Tutorial Blog

Blog Sahabat